<template>
	<view class="editPassword">
		
		<u-navbar  title="更换手机号"  :border-bottom="false"  >
		</u-navbar>
		<view class="editPassword__block">
			
			<view class="editPassword__block__text">
				为了保证账号安全，请输入更换绑定的手机号
			</view>
<!-- 			<view class="editPassword__block__phone">
				+{{state.code}} {{getSafeText(phone)}}
			</view> -->
			<u-form-item class="editPassword__block__input">
				<view class="editPassword__block__input__countryCode" @click="getCountry()">
					<view>+{{state.code}}</view>
					<view class="editPassword__block__input__countryCode__border-right"></view>
				</view>
				<u-input
					v-model="phone"  
					:label-width="0"
					:focus="true"
					type="number"
					placeholder=""
					:clearable="false"
					@input="checkPhone">
					
				</u-input>
			</u-form-item>
		
			<u-button class="editPassword__block__button" :disabled="canClick" type="primary" @click="getCode()">
				<view v-if="!loadding">确定</view>
				<u-loading v-else mode="circle"></u-loading>
				
			</u-button>
			
		</view>
	</view>
</template>

<script>
	import  axios from "axios";
	import store from './store.js'
	export default {
		data() {
			return {
				state:store.state,
				passwordIcon:true,
				phone:'',
				canClick:true,
				loadding:false,
			}
		},
		onLoad() {
			
		},
		onLoad() {

		},
		mounted(){
			// this.phone=this.$store.state.userInfo.phone
		},
		methods: {
			getCountry(){
				uni.navigateTo({
					url:"/pages/login/chooseCountry"
				})
			},
			checkPhone(){
				if(this.$u.test.mobile(this.phone)){
					
					this.canClick=false
				}else{
					this.canClick=true
				}
			},
			getSafeText(phone){
				return phone.substring(0,3)+"****"+phone.substring(phone.length-4)
			},
			getCode() {
				this.loadding=true
				let phoneCodeData={
					"phone":this.phone,
					"type":4
				}
				axios({
					method:"get",
					url:getApp().$store.state.baseURL+"/user/phonecode",
					params:phoneCodeData,
				}).then((response)=>{
					this.loadding=false
					console.log("response",response)
					if(response.data.state=="SUCCESS"){
						uni.showToast({
							title: '验证码发送成功',
							icon:'none',
							duration: 2000
						});
						this.state.resetPhone=this.phone
						uni.navigateTo({
							url:"/pages/core/mine/setting/accountSetting/editPhoneVerificationCode"
						})
					}else{
						uni.showToast({
							title: '验证码发送失败',
							icon:'none',
							duration: 2000
						});
					}
				})
			},
			

		}
	}
</script>
<style lang="scss" scoped>
	a {
		color: $uni-text-color-placeholder;
	}
</style>
<style lang="less" scoped>
	.editPassword{
		display: flex;
		flex-direction: column;
		align-items: center;
		// height: calc(100vh);
		// background-color: @uni-bg-color-grey;
		
		&__block {
		display: flex;
		flex-direction: column;
		&__input {
			margin:@uni-spacing-row-sm 2*@uni-spacing-row-lg  0  2*@uni-spacing-row-lg ;
			font-size: @uni-font-size-lg;
			&__countryCode{
				margin-right: @uni-spacing-col-sm ;
				display: flex;
				align-items:center;
				&__border-right{
					margin-left: @uni-spacing-col-base;
					background-color: @uni-border-color;
					width: 1px;
					height: 10px;
				}
			}
		
		}

		&__text{
			margin: 2*@uni-spacing-row-lg 2*@uni-spacing-row-lg;
			
			text-align: center;
			color: @font-color-grey;
		}
		&__phone{
			margin: @uni-spacing-row-lg 2*@uni-spacing-row-lg;
			text-align: center;
			font-size: @uni-font-size-lg;
		}
		&__button {
			margin-top: @uni-spacing-row-lg;
			margin-left: 2*@uni-spacing-col-lg;
			margin-right:2*@uni-spacing-col-lg;
		}
		// }
	}
	}
</style>
